<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        :root {
            --title-w: 75px;
            --left-bar-w: 290px;
            --bgc-theme: #b1b1b198;
        }

        body {
            height: 100vh;
            width: 100vw;
            margin: 0 0;
            padding: 0 0;
            overflow: hidden;
        }

        #headerBar {
            height: var(--title-w);
            border-radius: 5px;
            width: calc(100vw - 10px);
            margin-left: 5px;
            background-color: var(--bgc-theme);
            position: absolute;
            top: 5px;
        }
    </style>
    <script src="/static/eui/vue.js"></script>
    <script src="/static/eui/index.js"></script>
    <link rel="stylesheet" href="/static/eui/index.css">
    <script src="/static/jquery/jquery-3.7.1-dev.js"></script>

    {% block head %} {% endblock %}
</head>

<body>
<div id="app">
    <div id="headerBar">
        {% block headerBar %} {% endblock %}
    </div>
    {% block body %}{% endblock %}
</div>
</body>
{% block script %}{% endblock %}

<script>
    /** 如果继承的template 未使用vue 则创建默认的vue对象 */
    var vueApp = null;
    window.onload = function () {
        if (vueApp == null) {
            vueApp = new Vue({
                delimiters: ['{', '}'], /* 变量绑定符号 */
                el: '#app',  /*指定vue app 的对象*/
                data: function () {
                    return {visible: false}
                }
            });
        }
    }
</script>
</html>
